The Laser Pointer project demonstrates how to create interactive pointers that collide with virtual objects. Users can create colored laser pointer marks that persist for a few seconds before fading away by interacting with an object. This project showcases Spectacles Interaction Kit (SIK) and Spectacles Sync Kit (SSK), allowing multiple users to see and interact with the object through pointers, in a shared space.
NOTE: This project will only work for the Spectacles platform.
Designing Lenses for Spectacles offers all-new possibilities to rethink user interaction with digital spaces and the physical world. Get started using our Design Guidelines
- Lens Studio: v5.15.1+
- Spectacles OS Version: v5.64+
- Spectacles App iOS: v0.64+
- Spectacles App Android: v0.64+
To update your Spectacles device and mobile app, refer to this guide.
You can download the latest version of Lens Studio from here.
To obtain the project folder, clone the repository.
IMPORTANT: This project uses Git Large Files Support (LFS). Downloading a zip file using the green button on GitHub will not work. You must clone the project with a version of git that has LFS. You can download Git LFS here.
The project is pre-configured and ready to use without additional setup. Simply open the LaserPointer.esproj file in Lens Studio to get started.
The Laser Pointer project allows users to create persistent pointer marks in their environment that are visible to all connected users. Each pointer has a randomly assigned color and will fade away automatically after a short period of inactivity.
Key features include:
- Interactive pointer instantiation using the Instantiator (SSK)
- Synchronized pointers visible to all connected user
- Color synchronization using SyncMaterial (SSK)
- Transform synchronization using SyncTransform (SSK)
- Visual feedback with colorful pointers that fade out over time
private spawnPointer(interactor: Interactor) {
// Create a new pointer instance using the Instantiator
this.pointerInstantiator.instantiate(this.pointerPrefab, {}, (networkRootInfo: NetworkRootInfo) => {
const object = networkRootInfo.instantiatedObject;
const pointerComponent = object.getComponent<Pointer>(Pointer.getTypeName());
if (pointerComponent) {
pointerComponent.setInteractor(interactor);
}
});
}- Managing the appearance and behavior of individual pointer instances
- Updating pointer positions based on interactor target positions
- Fading out pointers over time after interaction ends
- Cleaning up pointer objects once they've fully faded out
- Creating new pointer instances when users interact with the target object
- Connecting pointers to their corresponding interactors once instantiation is complete
- Instantiating pointers with the Instantiator from Spectacles Sync Kit for multi-user visibility
- Open the project in Lens Studio and enter Preview mode
- Select "Multiplayer" in each preview window
- Click or tap on the jug to create pointer marks
- Observe how pointers fade out after interaction stops
- Test with multiple simulated preview windows to verify synchronization
- Build and deploy the project to multiple Spectacles devices
- Connect the devices together in the same session
- Point at the jug and pinch to create pointer marks
- Verify that all users can see pointers created by others
If you have any questions or need assistance, please don't hesitate to reach out. Our community is here to help, and you can connect with us and ask for support here. We look forward to hearing from you and are excited to assist you on your journey!
Feel free to provide improvements or suggestions or directly contributing via merge request. By sharing insights, you help everyone else build better Lenses.
Built with 👻 by the Spectacles team